<template>
  <div class="edit-container">
    <el-card class="edit-card">
      <div slot="header" class="clearfix">
        <span>新增</span>
      </div>
      <div class="edit-main">
        <el-form
          :model="form"
          ref="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专利名称" prop="patentName">
                <el-input
                  v-model="form.patentName"
                  placeholder="请输入专利名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利编号" prop="patentCode">
                <el-input
                  v-model="form.patentCode"
                  placeholder="请输入专利编号"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利类别" prop="patentCategoryId">
                <el-select
                  v-model="form.patentCategoryId"
                  placeholder="选择专利类别"
                >
                  <el-option
                    v-for="item in patentCategories"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="公司" prop="company">
                <el-input
                  v-model="form.company"
                  placeholder="请输入公司名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="发明人" prop="inventor">
                <el-input
                  v-model="form.inventor"
                  placeholder="请输入发明人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利权人" prop="patentOwner">
                <el-input
                  v-model="form.patentOwner"
                  placeholder="请输入专利权人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="申请号" prop="applicationNum">
                <el-input
                  v-model="form.applicationNum"
                  placeholder="请输入申请号"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="申请日期" prop="applicationDate">
                <el-date-picker
                  v-model="form.applicationDate"
                  type="date"
                  placeholder="选择申请日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="登记日期" prop="registerDate">
                <el-date-picker
                  v-model="form.registerDate"
                  type="date"
                  placeholder="选择登记日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利授权日期" prop="authorizationDate">
                <el-date-picker
                  v-model="form.authorizationDate"
                  type="date"
                  placeholder="选择授权日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利号" prop="patentNum">
                <el-input
                  v-model="form.patentNum"
                  placeholder="请输入专利号"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="专利期限" prop="patentTerm">
                <el-input-number
                  v-model="form.patentTerm"
                  :min="1"
                  placeholder="输入专利期限"
                ></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="获取方式" prop="getMethod">
                <el-select v-model="form.getMethod" placeholder="选择获取方式">
                  <el-option label="方法一" :value="1"></el-option>
                  <el-option label="方法二" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="输入备注"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="创建人" prop="creatorId">
                <el-select v-model="form.creatorId" placeholder="选择创建人">
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="warning" @click="goBack()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { patent } from "@/api/patent";
import { patentCategory } from "@/api/patentCategory";
import userService from "@/api/user";

export default {
  data() {
    return {
      form: {
        patentName: "",
        patentCode: "",
        patentCategoryId: null,
        company: "",
        inventor: "",
        patentOwner: "",
        applicationNum: "",
        applicationDate: null,
        registerDate: null,
        authorizationDate: null,
        patentNum: "",
        patentTerm: null,
        getMethod: null,
        remark: "",
        creatorId: null,
      },
      rules: {
        patentName: [
          { required: true, message: "请输入专利名称", trigger: "blur" },
        ],
        patentCode: [
          { required: true, message: "请输入专利编号", trigger: "blur" },
        ],
        patentCategoryId: [
          { required: true, message: "请选择专利类别", trigger: "change" },
        ],
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        inventor: [
          { required: true, message: "请输入发明人", trigger: "blur" },
        ],
        patentOwner: [
          { required: true, message: "请输入专利权人", trigger: "blur" },
        ],
        applicationNum: [
          { required: true, message: "请输入申请号", trigger: "blur" },
        ],
        applicationDate: [
          { required: true, message: "请选择申请日期", trigger: "change" },
        ],
        registerDate: [
          { required: true, message: "请选择登记日期", trigger: "change" },
        ],
        authorizationDate: [
          { required: true, message: "请选择授权日期", trigger: "change" },
        ],
        patentNum: [
          { required: true, message: "请输入专利号", trigger: "blur" },
        ],
        patentTerm: [
          { required: true, message: "请输入专利期限", trigger: "blur" },
          {
            type: "number",
            min: 1,
            message: "专利期限必须大于0",
            trigger: "blur",
          },
        ],
        getMethod: [
          { required: true, message: "请选择获取方式", trigger: "change" },
        ],
        creatorId: [
          { required: true, message: "请选择创建人", trigger: "change" },
        ],
      },
      patentCategories: [], // 作品类别选项，需从API获取
      users: [], // 用户选项，需从API获取
      getMethods: [
        { id: 1, name: "方法一" },
        { id: 2, name: "方法二" },
      ], // 获取方式的示例选项
      size: "medium",
    };
  },
  created() {
    this.getPatentCategories();
    this.getUsers();
  },
  methods: {
    getPatentCategories() {
      patentCategory.findAll().then((res) => {
        this.patentCategories = res.data;
      });
    },
    getUsers() {
      userService.findAll().then((res) => {
        this.users = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log("submit!");
          // 提交逻辑，例如发送到后端
          patent
            .add(this.form)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.$router.push({
                name: "Patent",
              });
            })
            .catch(() => {
              this.$message({
                message: res.msg,
                type: "danger",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.clearfix {
  text-align: center;
}

.input-style {
  width: 100%; /* 输入框宽度一致 */
}

/* 使每个表单项的标签及内容居中 */
.el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
